<template>
	<view class="container">
		<!-- 头部统计信息 -->
		<view class="header-stats f f-a-c f-j-b">
			<view class="stats-info">
				<text class="stat-item">全部: {{ totalCount }}</text>
				<text class="stat-item">未审阅: {{ unReviewedCount }}</text>
				<text class="stat-item">已审阅: {{ reviewedCount }}</text>
			</view>
			<view class="batch-review-btn f f-a-c f-j-c" @tap="batchReview">批量审阅</view>
		</view>

		<!-- 学生列表 -->
		<view class="student-list">
			<view v-for="(student, index) in studentList" :key="student.id" class="student-item"
				@tap="toggleStudent(index)">
				<view class="checkbox-wrapper" @tap.stop="toggleStudent(index)">
					<view class="checkbox" :class="{ 'checked': student.selected }">
						<text v-if="student.selected" class="check-icon">✓</text>
					</view>
				</view>

				<view class="student-info">
					<view class="student-header">
						<text class="student-name">{{ student.name }}</text>
						<text class="student-class f f-a-c f-j-c">{{ student.class }}</text>
						<view v-if="student.reviewed" class="reviewed-badge f f-a-c f-j-c">
							<text class="badge-text">已审阅</text>
						</view>
					</view>
					<view class="student-stats">
						<text class="stat-text">正确: {{ student.correct }}</text>
						<text class="stat-text">错误: {{ student.wrong }}</text>
						<text class="stat-text">漏写: {{ student.missing }}</text>
					</view>
				</view>

				<view class="arrow-icon">
					<!-- <text class="arrow">></text> -->
					<image src="/static/home/jian.png" class="arrow" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 底部操作区 -->
		<view class="bottom-actions">
			<view class="select-all-section">
				<view class="select-all-wrapper" @tap="toggleSelectAll">
					<view class="checkbox" :class="{ 'checked': isAllSelected }">
						<text v-if="isAllSelected" class="check-icon">✓</text>
					</view>
					<text class="select-all-text">全选</text>
				</view>
				<view class="review-btn f f-a-c f-j-c" @tap="reviewSelected" :disabled="selectedCount === 0">
					审阅
				</view>
			</view>

			<view class="action-buttons">
				<view class="action-btn secondary f f-a-c f-j-c" @tap="sendToParent">发给家长端</view>
				<view class="action-btn primary f f-a-c f-j-c" @tap="viewReport">查看统计报告</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentList: [{
						id: 1,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 2,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 3,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 4,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 5,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 6,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: false,
						selected: false
					},
					{
						id: 7,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: true,
						selected: false
					}, {
						id: 8,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: true,
						selected: false
					}, {
						id: 9,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: true,
						selected: false
					}, {
						id: 10,
						name: '小明',
						class: '3年2班',
						correct: 5,
						wrong: 2,
						missing: 2,
						reviewed: true,
						selected: false
					},
				]
			}
		},
		computed: {
			totalCount() {
				return this.studentList.length;
			},
			reviewedCount() {
				return this.studentList.filter(student => student.reviewed).length;
			},
			unReviewedCount() {
				return this.studentList.filter(student => !student.reviewed).length;
			},
			selectedCount() {
				return this.studentList.filter(student => student.selected).length;
			},
			isAllSelected() {
				return this.studentList.length > 0 && this.studentList.every(student => student.selected);
			}
		},
		methods: {
			// 切换单个学生的选择状态
			toggleStudent(index) {
				this.studentList[index].selected = !this.studentList[index].selected;
				uni.navigateTo({
					url: '/pages/index/correcting'
				})
			},

			// 全选/取消全选
			toggleSelectAll() {
				const shouldSelectAll = !this.isAllSelected;
				this.studentList.forEach(student => {
					student.selected = shouldSelectAll;
				});

				uni.showToast({
					title: shouldSelectAll ? '已全选' : '已取消全选',
					icon: 'success',
					duration: 1000
				});
			},

			// 批量审阅
			batchReview() {
				const unReviewedStudents = this.studentList.filter(student => !student.reviewed);
				if (unReviewedStudents.length === 0) {
					uni.showToast({
						title: '没有待审阅的学生',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '批量审阅',
					content: `确定要审阅所有${unReviewedStudents.length}个未审阅的学生吗？`,
					success: (res) => {
						if (res.confirm) {
							unReviewedStudents.forEach(student => {
								student.reviewed = true;
							});
							uni.showToast({
								title: '批量审阅完成',
								icon: 'success'
							});
						}
					}
				});
			},

			// 审阅选中的学生
			reviewSelected() {
				const selectedStudents = this.studentList.filter(student => student.selected && !student.reviewed);

				if (selectedStudents.length === 0) {
					uni.showToast({
						title: '请选择未审阅的学生',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '审阅确认',
					content: `确定要审阅选中的${selectedStudents.length}个学生吗？`,
					success: (res) => {
						if (res.confirm) {
							selectedStudents.forEach(student => {
								student.reviewed = true;
								student.selected = false;
							});
							uni.showToast({
								title: '审阅完成',
								icon: 'success'
							});
						}
					}
				});
			},

			// 发给家长端
			sendToParent() {
				const selectedStudents = this.studentList.filter(student => student.selected);

				if (selectedStudents.length === 0) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '发送确认',
					content: `确定要将${selectedStudents.length}个学生的结果发送给家长端吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '发送成功',
								icon: 'success'
							});
						}
					}
				});
			},

			// 查看统计报告
			viewReport() {
				uni.navigateTo({
					url: '/pages/index/correctingMoXie'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
	}

	.header-stats {
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.stats-info {
		display: flex;
		gap: 20rpx;
	}

	.stat-item {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		margin-right: 20rpx;
	}

	.batch-review-btn {
		color: white;
		border: none;
		width: 120rpx;
		height: 40rpx;
		background: #FF2020;
		border-radius: 4rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	// .batch-review-btn::after {
	// 	border: none;
	// }

	.student-list {
		background-color: white;
		margin-top: 20rpx;
		height: 80%;
		overflow: auto;
		padding-bottom: 250rpx;
	}

	.student-list::-webkit-scrollbar {
		width: 0;
		/* 滚动条宽度 */
	}

	.student-item {
		position: relative;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.checkbox-wrapper {
		margin-right: 20rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;

		&.checked {
			background-color: #007bff;
			border-color: #007bff;
		}
	}

	.check-icon {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	.student-info {
		flex: 1;
	}

	.student-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.student-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-right: 20rpx;
	}

	.student-class {
		font-weight: 400;
		font-size: 24rpx;
		color: #917CFC;
		background-color: #f8f9fa;
		width: 104rpx;
		height: 40rpx;
		background: #F2EFFF;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.reviewed-badge {
		position: absolute;
		top: 10rpx;
		right: 8rpx;
		background-color: #007bff;

		width: 78rpx;
		height: 34rpx;
		border-radius: 4rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.badge-text {
		font-size: 20rpx;
		color: white;
	}

	.student-stats {
		display: flex;
		gap: 20rpx;
	}

	.stat-text {
		font-size: 24rpx;
		color: #666;
	}

	.arrow-icon {
		margin-left: 20rpx;
	}

	.arrow {
		width: 30rpx;
		height: 30rpx;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx 30rpx 40rpx;
		border-top: 1rpx solid #eee;
	}

	.select-all-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.select-all-wrapper {
		display: flex;
		align-items: center;
	}

	.select-all-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 15rpx;
	}

	.review-btn {
		background: #FF2020;
		color: white;
		border: none;
		width: 108rpx;
		height: 48rpx;
		border-radius: 4rpx;
		font-size: 26rpx;

		&[disabled] {
			background-color: #ccc;
			color: #999;
		}
	}

	.review-btn::after {
		border: none;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		flex: 1;
		// height: 80rpx;
		border: none;
		border-radius: 12rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;

		&.secondary {
			width: 288rpx;
			height: 104rpx;
			background: #CCCCCC;
			border-radius: 30rpx;
			color: white;
			margin-right: 50rpx;
		}

		&.primary {
			width: 288rpx;
			height: 104rpx;
			background: #05C490;
			border-radius: 30rpx;
			color: white;
		}
	}

	// .action-btn::after {
	// 	border: none;
	// }

	/* 添加底部安全区域 */
	.bottom-actions {
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}
</style>